<template>
  <div>
    <div class="hearder">
      <div class="search">
        <input type="text"  placeholder="请输入用户名" v-model="memberName">
        <div style="width: 10px;height: 50px;"></div>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div class="add"  @click="getcart" id="getAll">
        <div><i class="el-icon-shopping-cart-2"></i></div>
        <div style="width: 5px;height: 50px;" ></div>
        所有
      </div>
    </div>
    <div class="table">
        <el-table
            :data="cartList"
            style="width: 100%;">
          <el-table-column
              prop="cartId"
              header-align="center"
              align="center"
              label="购物车id">
          </el-table-column>
          <el-table-column
              prop="userName"
              header-align="center"
              :show-overflow-tooltip='true'
              align="center"
              label="用户名">
          </el-table-column>
          <el-table-column
              prop="time"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="加入时间">
          </el-table-column>
          <el-table-column
              prop="title"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="标题">
          </el-table-column>
          <el-table-column
              prop="brand"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="品牌">
          </el-table-column>
          <el-table-column
              prop="store"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="店铺">
          </el-table-column>
          <el-table-column
              prop="sellTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="上市时间">
          </el-table-column>
          <el-table-column
              prop="style"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="样式">
          </el-table-column>
          <el-table-column
              prop="size"
              header-align="center"
              align="center"
              :show-overflow-tooltip='true'
              label="型号">
          </el-table-column>
          <el-table-column
              prop="num"
              header-align="center"
              align="center"
              label="数量">
          </el-table-column>
          <el-table-column
              prop="unitPrice"
              header-align="center"
              align="center"
              label="单价">
          </el-table-column>
          <el-table-column
              prop="allPrice"
              header-align="center"
              align="center"
              label="总价">
          </el-table-column>
          <el-table-column
              prop="status"
              header-align="center"
              align="center"
              label="状态">
            　<template slot-scope="scope">
                  <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 0">未付款</el-tag>
                  <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 1">已购买</el-tag>

            　</template>
          </el-table-column>
          <el-table-column
              prop="image"
              header-align="center"
              align="center"
              label="图片">
            <template slot-scope="scope">
              　<img :src="scope.row.image" width="40" height="40" v-if="scope.row.image!=null"/>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div class="page" v-if="type==0">
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[7,15,20,30,50,200]"
            :page-size='pageSize'
            layout="total, sizes, prev, pager, next, jumper"
            :total='total'>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
//import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
//这里存放数据
    return {
      dataList:[],
      cartList:[],
      pageNum:1,
      pageSize:7,
      total:0,
      memberName:null,
      type:0
    };
  },
//计算属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},
//方法集合
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getcart()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getcart()

    },
    getcart(){
      this.type = 0;
      this.cartList = []
      this.$http({
        url: "member/shopcart/page",
        method: 'post',
        data:this.$http.adornData({
          pageSize:this.pageSize,
          pageNum:this.pageNum
        })
      }).then((res)=>{
        this.cartList = res.data.list
        this.total = res.data.page.totalCount
        // console.log(res.data)
      })

    },
      search(){
        this.type = 1;
        this.$http({
          url:"member/shopcart/search",
          method:"post",
          data:{
            pageSize:this.pageSize,
            pageNum:this.pageNum,
            search:this.memberName
          }
        }).then((res)=>{

          this.cartList = res.data.list
        })
      }

  },
//声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getcart()
  },
//声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.table{
  line-height: 0;
}
.hearder{
  display: flex;
  width: 100%;
  height: 100px;
  /*background-color: #FBAB7E;*/
}
.search{
  display: flex;
  margin: 25px;
  width: 350px;
  height: 50px;
  /*background-color: red;*/
}
.search>input{
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  color: #99A3A4;
  font-size: 17px;
  border: 1px solid #409eff;
  outline-color: #48dd68;
}
.add{
  display: flex;
  margin-top: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  background-color: #48dd68;
}
.add>div{
  width: 35px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
#getAll:active{
  background-color: #3498DB;
}
#getAll:hover{
  background-color: #F7DC6F;
}
</style>
